﻿<!DOCTYPE html>
<%@ taglib prefix="sf" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<spring:url value="/" var="prjroot"></spring:url>

<html lang="en">
<head>
<meta charset="utf-8"/>
<title>产品</title>
<meta name="description" content="页面描述">
<meta name="keywords" content="页面关键词">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="${prjroot}style/reset.css" />
<link type="text/css" rel="stylesheet" href="${prjroot}style/common.css" />
<script type="text/javascript" src="${prjroot}style/TouchSlide.1.0.js"></script>
</head>

<body>

<section id="focusImg">
	<img src="${prjroot}images/index_focusImg.jpg"/>
</section>
<script>
			var obj=document.getElementById('focusImg');
			var oImg=obj.getElementsByTagName('img');
			
			var objWidth=obj.offsetWidth;
			
			for(i=0;i<oImg.length;i++)
			{
				
				oImg[i].style.width=objWidth+'px';
			}
</script>
		
<nav id="nav">

<c:forEach var="c" items="${cat}">
	<a href="${prjroot}wechat/intro1?catId=${c.id}">${c.catName}</a>
</c:forEach>
</nav>

<article>
	<h1 class="item-title">${prod.proName}</h1>
	<section class="Rows item-rows">
		<img src="${prod.pic}"/>
	</section>
</article>

			<div id="picScroll" class="picScroll">
				<div class="bd">
				
				<c:forEach var="p" items="${prodList}" varStatus="index">
					<c:if test="${index.index % 4 == 0}">
						<ul>					
					</c:if>
					<c:if test="${empty p.pic}">
							<li><a href="${prjroot}wechat/intro1?prod=${p.id}&catId=${p.catId}" class="pic"><img _src="${prjroot}images/index_focusImg.jpg" src="${prjroot}images/blank.png" /></a><a href="" class="name"></a></li>
					</c:if>
					<c:if test="${not empty p.pic}">
							<li><a href="${prjroot}wechat/intro1?prod=${p.id}&catId=${p.catId}" class="pic"><img _src="${p.pic}" src="${prjroot}images/blank.png" /></a><a href="" class="name"></a></li>

					</c:if>
					
					<c:if test="${index.index > 0 && (index.index+1) % 4 == 0}">
						</ul>					
					</c:if>						
				
				</c:forEach>
		</div>
				<div class="hd">
					<ul></ul>
				</div>
			</div>
			<script type="text/javascript">
				TouchSlide({ 
					slideCell:"#picScroll",
					titCell:".hd ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
					autoPage:true, //自动分页
					pnLoop:"false", // 前后按钮不循环
					switchLoad:"_src" //切换加载，真实图片路径为"_src" 
				});
			</script>

</body>
</html>